// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';

// antd 按需加载
import { } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { } from './module.js'

// 引入样式
import Styles from './style.js';

// 引入公用组件
import { } from '../../components/index.js'


class ImportantTitle extends Component {
	static propTypes = {

	}


	constructor(props) {
		super(props)
		this.state = {
			theme: {
				color: '#000000',
				line: '#888888',
				extra: '#949494',
			},
			transparent: {
				color: '#fff',
				line: '#ccc',
				extra: '#eee',
			},
			dark: {
				color: '#fff',
				line: '#fff',
				extra: '#fff',
			},
			bright: {
				color: '#000',
				line: '#888888',
				extra: '#949494',
			},
		}
	}

	componentWillMount() {
		this.getTheme()
	}

	getTheme() {
		const { type } = this.props
		switch (type) {
			case 'dark':
				this.setState({
					theme: this.state.dark
				})
				return
			case 'bright':
				this.setState({
					theme: this.state.bright
				})
				return
			case 'transparent':
				this.setState({
					theme: this.state.transparent
				})
				return
			default:
				return
		}
	}

	render() {
		const { title, } = this.props
		const { theme, } = this.state
		return (
			<View style={{
				alignItems: 'center',
				flexDirection: 'row',
			}}>
				<Text style={{ fontSize: 24, color: theme.color, lineHeight: 26, fontWeight: 'bold' }}>{title}</Text>
				<Text style={{ fontSize: 16, color: theme.line, lineHeight: 18, marginHorizontal: 5 }}>/</Text>
				<View style={{}}>
					<Text style={{ fontSize: 10, color: theme.extra, lineHeight: 12, }}>河马品质商家</Text>
					<Text style={{ fontSize: 10, color: theme.extra, lineHeight: 12, }}>享受全场优惠</Text>
				</View>
			</View>
		)
	}
}

export default pureRender(ImportantTitle)
